<template>
  <div id="link">
    <div class="title">
      <h3>友情链接</h3>
      <span style="font-weight: 500">首先感谢你的来访，欢迎交换首页链接。</span>
      <p>本站暂时目标友链{{this.$store.state.config.link_max}}个，在这里不要求权重，也不讲究PR，但是也有一些小小限制。</p>
      <h5>友链交换原则</h5>
      <p>1、网站主题：互联网资讯、技术、设计等原创内容个人网站。</p>
      <p>2、网站内容：内容积极向上，界面干净整洁。</p>
      <p>3、网站更新：活跃更新为佳。</p>
      <p>4、网站友链：30个以内。</p>
      <p>5、百度正常收录30+。</p>
      <p>6、无作弊或降级。</p>
    </div>

    <div class="desc">
      <span class="block"><span class="important">|</span>符合条件的站长，可在申请通过后，3日内添加本站友链。</span>
      <span class="block">友链名称：{{this.$store.state.config.site_name || 'itSpire'}}</span>
      <span class="block">友链地址：{{this.$store.state.config.site_url || 'https://www.itspire.cn'}}</span>
    </div>

    <div class="apply">
      <h5>友链申请</h5>
      <el-form ref="form" :model="form" :rules="rules" label-width="70px" size="mini" v-if="this.status === -1">
        <el-form-item label="友链名称" prop="linkName">
          <el-input v-model="form.linkName" placeholder="请输入友链名称" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="友链地址" prop="linkUrl">
          <el-input v-model="form.linkUrl" placeholder="请输入友链地址" maxlength="30" show-word-limit>
            <el-select v-model="http" slot="prepend" class="select-width" placeholder="请选择">
              <el-option label="http://" value="http://"></el-option>
              <el-option label="https://" value="https://"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="联系名称" prop="nickname" v-if="!this.$store.getters.token">
          <el-input v-model="form.nickname" placeholder="请输入联系名称" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contact" v-if="!this.$store.getters.token">
          <el-input placeholder="请输入Email" v-model="form.contact" class="input-with-select" maxlength="30"
                    show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            :autosize="{ minRows: 2, maxRows: 4}"
            v-model="form.remarks"
            maxlength="50"
            resize="none"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item size="mini">
          <el-button type="primary" size="mini" @click="onApply()">申请</el-button>
        </el-form-item>
      </el-form>
      <div class="mb-10 tc" v-else-if="this.status === 0">
        <span>审核中，请耐心等待~</span>
      </div>
      <div class="mb-10 tc" v-else-if="this.status === 1">
        <span>你的申请已经通过了哦~</span>
      </div>
      <div class="mb-10 tc" v-else-if="this.status === 2">
        <span>你的申请被拒绝了哦~</span>
        <el-link type="primary" :underline="false" size="mini" @click="onApply()">重新申请</el-link>
      </div>
      <div class="mb-10 tc" v-else-if="this.status === -2">
        <span>你的友链被禁用了哦~</span>
        <el-link type="primary" :underline="false" size="mini" @click="onApply()">重新申请</el-link>
      </div>
    </div>

    <div class="list">
      <div class="list-count line-1">
        <span>已有{{total}}条申请</span>
      </div>
      <div class="timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in list"
            :key="index"
            :icon="item.icon"
            :type="item.type"
            :color="item.status === 1 ? (item.status === 2 ? '#F56C6C' : '#0bbd87') : ''"
            :size="item.size"
            :hide-timestamp="timestampHide"
            :timestamp="formatTime(item.createTime)">
            <span>{{item.nickname}} 申请友链</span>
            <el-button class="link-name" size="mini" type="text">{{ item.linkName }}</el-button>
            (
            <el-link :underline="false" target="_blank" :href="item.linkUrl">{{item.linkUrl}}</el-link>
            )
            <span class="opacity-5" v-if="item.remarks">，说道: {{item.remarks}}</span>
            <div class="line-time">{{formatTime(item.createTime)}}</div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "link.vue",
    data() {
      return {
        http: 'http://',
        form: {
          linkName: '',
          linkUrl: '',
          contactType: '2',
          nickname: '',
          contact: '',
          remarks: '',
        },
        rules: {
          linkName: [
            {required: true, message: '请输入友链名称', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到10 个字符', trigger: 'blur'}
          ],
          linkUrl: [
            {required: true, message: '请输入友链地址', trigger: 'blur'},
            {min: 10, max: 30, message: '长度在 10 到 30 个字符', trigger: 'blur'}
          ],
          nickname: [
            {required: true, message: '请输入昵称', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
          ],
          contact: [
            {required: true, message: '请输入Email', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
          ],
        },
        list: [],
        total: 0,
        timestampHide: true,
        status: '',
      }
    },
    methods: {
      async getLinkList() {
        // let res = await this.$api.linksApplyList()
        let res = {"count":1,"list":[{"id":1,"userId":2,"linkName":"itSpire","linkUrl":"http://www.itspire.cn","contactType":0,"remarks":"","status":1,"createTime":1493977723,"deleteTime":0,"auditTime":0,"nickname":"唐佚俊","contact":""}]}
        this.list = res.list
        this.total = res.count
      },
      async getLinkStatus() {
        if (this.$store.getters.token) {
          // let res = await this.$api.linksApplyStatus()
          let res = {"status":-1}
          this.status = res.status
        } else {
          this.status = -1
        }
      },
      async onApply() {
        // 表单验证
        this.$refs['form'].validate(async (valid) => {
          if (!valid) {
            this.$message.error('验证失败！')
            return
          }

          if (!this.$store.getters.token) {
            let data = {
              nickname: this.form.nickname,
              contact: this.form.contact,
              contactType: parseInt(this.form.contactType),
            }
            // let res = await this.$api.login(this.$common.filterParam(data))
            let res = {"token":"/qr7CqMo5LAKdeGXl2kFvG87F4joXryEt1hivv0y1SM=","userInfo":{"avatar":"http://cdn.itspire.cn/avatar_1602748921550_1597302549650.jpg","nickname":"test2"}}
            this.$store.dispatch('setLogin', res)
          }

          let data = {
            linkName: this.form.linkName,
            linkUrl: this.http + this.form.linkUrl,
            remarks: this.form.remarks,
          }

          const loading = this.openLoading();
          // await this.$api.linkCreate(this.$common.filterParam(data))
          await this.getLinkStatus()
          await this.getLinkList()
          loading.close();
          this.$message.success('已申请，待审核~')
          this.resetForm('form')
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      formatTime(timestamp) {
        return this.$common.formatDate(timestamp)
      },
    },
    mounted() {
      this.getLinkStatus()
      this.getLinkList()
    }
  }
</script>

<style scoped>

  #link {
    text-align: left;
  }

  .title {
    padding: 10px 20px;
  }

  .apply {
    padding: 10px 20px 0;
  }

  .select-width {
    width: 75px;
  }

  .desc {
    padding: 8px 20px;
    background: #FBFBFB;
    -webkit-line-clamp: unset;
  }

  .desc .block {
    padding: 3px 0;
  }

  .important {
    font-weight: 900;
    color: #ff0000;
    margin-right: 5px;
    vertical-align: top;
  }

  .el-input__suffix-inner .el-input__icon {
    width: unset;
  }

  .el-form-item {
    margin-bottom: 15px;
  }

  .list {
    padding: 0 20px;
  }

  .list .list-count {
    padding: 8px 0;
    font-weight: 500;
  }

  .list .timeline {
    margin-top: 15px;
  }

  .el-link {
    width: unset;
  }

  .link-name {
    padding: 0;
  }

  .timeline ul li {
    line-height: unset;
    cursor: unset;
    padding-bottom: 10px;
  }

  .line-time {
    color: #909399;
    margin-top: 5px;
  }

  .el-timeline {
    max-height: 400px;
    overflow-y: scroll;
    padding-left: 1px;
  }

</style>
